<template>
  <div class="table-image-list">
    <div class="image-list" v-show="urlList?.length">
      <img
        :src="urlResource + item.path"
        alt=""
        v-for="(item, index) in urlList?.slice(0, 3)"
        :key="item.id"
        @click="
          () => {
            showPreview = true;
            initialIndex = index;
          }
        "
      />
    </div>
    <div class="image-list-add" @click="add">
      <el-icon><Plus /></el-icon>
    </div>
  </div>
  <el-image-viewer
    v-if="showPreview"
    :url-list="urlList.map(item => urlResource + item.path)"
    show-progress
    :initial-index="initialIndex"
    @close="showPreview = false"
  />
</template>
<script setup lang="ts">
import { ref, inject } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { updateProjectProblemUpdateImg } from "@/api/modules/project";
import { dialogForm, DialogFormOptions } from "@/utils/dialogForm";
import { QA } from "@/constants";
const emits = defineEmits(["change"]);
const showPreview = ref(false);
const initialIndex = ref(0);
const urlResource = inject("urlResource");
type Props = {
  urlList: string[];
  problemId: string;
};
const { urlList = [], problemId } = defineProps<Props>();
const config = ref({});

//修改图片
config.value = {
  title: "修改问题图片",
  width: 80,
  height: "80vh",
  form: {
    formData: {
      problemId: problemId,
      imgList:
        (urlList &&
          urlList.map(item => {
            item.url = urlResource + item.path;
            return item;
          })) ||
        []
    },
    attribute: {
      "label-suffix": ""
    }
  },
  api: updateProjectProblemUpdateImg,
  column: [
    {
      type: "file",
      key: "imgList",
      formItemAttribute: {
        label: ""
      },
      attributes: {
        "prefix-data": QA,
        multiple: true,
        showFileList: true,
        limit: 30,
        width: "240px",
        height: "240px",
        type: "image",
        listType: "picture-card",
        fileType: ["image/jpeg", "image/png", "image/gif"]
      }
    }
  ],
  transformData: (data: any) => {
    data.imgList = data.imgList.map((item: any) => {
      return {
        name: item.name,
        path: item.path
      };
    });
    return data;
  },
  message: "图片修改成功"
};
const options: DialogFormOptions = {
  config: config.value,
  closeCallback: () => {},
  successCallback: () => {
    emits("change");
  }
};
const add = () => {
  dialogForm(options);
};
</script>
<style lang="scss" scoped>
.table-image-list {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  gap: 12px;
  .image-list {
    display: flex;
    gap: 12px;
    img {
      width: 32px;
      height: 32px;
    }
  }
  .image-list-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    font-size: 13px;
    color: #d8d8d8;
  }
}
</style>
